import Taro, {Component, Config} from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import './navbarBlock.scss'

import navbarBackIcon from '../../common/assets/navbar_back@2x.png'
import navbarHomeIcon from '../../common/assets/nav_home@2x.png'
import bg from '../../common/assets/navbar_bg1@2x.png'
import xBg from '../../common/assets/navbar_bg3@2x.png'


type Props = {
  title: string;
  onBackClick?: Function;
  isShowBack?:boolean;
  isShowHome?:number;
}

type PageState = {
  navigationBarHeight: number;
  statusBarHeight: number;
  isShowDialog: boolean;
}

export default class NavbarBlock extends Component<Props, PageState> {

  config: Config = {
    navigationStyle: 'custom',
  };

  constructor(props) {
    super(props);
    this.state = {
      navigationBarHeight: 80,
      statusBarHeight: 10,
      isShowDialog: false,
    };
  }

  componentWillMount() {
    //获取当前屏幕数据
    const that = this;
    Taro.getSystemInfo({
      success: function (res) {
        that.setState({statusBarHeight: res.statusBarHeight, navigationBarHeight: res.statusBarHeight + 44})
      }
    })
  }

  onBackClick() {
    this.setState({isShowDialog: true});
    this.props.onBackClick && this.props.onBackClick();
  }



  render() {
    const {navigationBarHeight,statusBarHeight} = this.state;
    const {title,isShowBack,isShowHome} = this.props;

    return (
      <View className='navbar-body-container'>
        <Image
          className='top-bg'
          mode='aspectFill'
          style={`height:${statusBarHeight+44}px`}
          src={statusBarHeight>20?xBg:bg}
        />
        <View className='navbar-block-container'>
          <View >
            <View style={`height:${statusBarHeight}px`}></View>
            <View className="bar-style">
              <View className="back-style" onClick={this.onBackClick.bind(this)}>
                {isShowBack &&isShowHome!=1&& <Image
                    className='back-icon'
                    mode='widthFix'
                    src={navbarBackIcon}
                />}
                {isShowHome==1 && <Image
                    className='back-icon'
                    mode='widthFix'
                    src={navbarHomeIcon}
                />}
              </View>
              <Text className="title">{title}</Text>
            </View>
          </View>
        </View>
        <View className='body' style={`margin-top: ${navigationBarHeight}px;`}>
          {this.props.children}
        </View>
      </View>
    )
  }
}

